<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div>demo - div</div>
    <div>demo - div</div>
    <div>demo - div</div>
    <div>demo - div</div>
    <div>demo - div</div>

    <script>
        // 需求：实现css方法的封装
        (function(window, undefined) {
            var jQuery = function(selector) {
                return new jQuery.fn.init(selector);
            }
            jQuery.fn = jQuery.prototype = {
                constructor: jQuery,
                init: function(selector) {
                    var elements = document.querySelectorAll('div');
                    [].push.apply(this, elements);
                },
                css: function(name, value) {
                    if (arguments.length === 2) {
                        for (var i = 0; i < this.length; i++) { //设置的是单个样式
                            this[i].style[name] = value;
                        }
                    } else if (arguments.length === 1) {
                        if (typeof name === 'object') { //设置的是多个样式遍历数组每一项
                            for (var i = 0; i < this.length; i++) {
                                for (var k in name) {
                                    this[i].style[k] = name[k];
                                }
                            }
                        } else if (typeof name === 'string') { //获取样式
                            // return this[0].style[name];//只能获取行内样式
                            // return window.getComputedStyle(this[0], null).name;//error 因为name是变量
                            return window.getComputedStyle(this[0], null)[name];
                        }
                    }
                },
                addClass: function(name) {
                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.add(name);
                    }
                    return this;
                },
                removeClass: function(name) {
                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.remove(name);
                    }
                    return this;
                },
                hasClass: function(name) {
                    for (var i = 0; i < this.length; i++) {
                        this[i].classList.contains(name);
                    }
                    return this;
                },
                toggleClass: function(name) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i].classList.contains(name)) {
                            this[i].classList.remove(name);
                        } else {
                            this[i].classList.add(name);
                        }

                    }
                    return this; //目的链式编程
                }
            }
            jQuery.fn.init.prototype = jQuery.fn;
            window.fn = window.$ = jQuery;
        })(window)

        var $divs = $("div"); // init的实例对象

        $divs.addClass("aa").addClass("bb").addClass("cc");
        console.log($divs.hasClass("aa"));
        // $divs.toggleClass("aa");
    </script>
</body>

</html>